<template>
  <div class="index-container">
    <!--顶部导航栏-->
    <Navbar class = "navbar"  id="nav" ></Navbar>
    <div class="index-main" id="index" >
      <Comment></Comment>
    </div>
    <!--回到顶部-->
    <el-backtop style="box-shadow: none;background: none;">
      <i alt="" src="../assets/toTopLogo.webp" style="width: 40px;height: 40px;"></i>
    </el-backtop>
    <!--底部footer-->
    <Footer class="index-foot"></Footer>


  </div>
</template>

<script>
import Footer from "../components/Footer";
import Navbar from "../components/Navbar";
import Comment from "../components/Comment";

export default {
  name: "About",
  components: {Footer, Navbar,Comment},
}
</script>

<style scoped>
.navbar {
  top: 0;
  z-index:9999;
  width: 100%;
  opacity: 0.9;
}
.index-container {
  min-height: 100vh;
  background-image: url("https://cdn.jsdelivr.net/gh/yubifeng/blog-resource/bloghosting/2021/04/23/first87.png")!important; ;
  background-repeat: repeat-x;
  background-attachment:fixed;
  background-size:cover;
}
.index-foot {
  background-color: #333333;
  color: white!important;
  opacity: 0.9;
  position: relative;
  margin-top: 200px;
}
.index-main {
  display: flex;
  margin-top: 10px;
  margin-bottom: 40px;
  padding-top: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  opacity: 0.97;
}

</style>